<template>
    <div>
        <cvue-dialog
            :dialogVisible="visible"
            title="在线修改"
            :isShowFoot="true"
         
            dialogWidth="80%"
            @handleOpen="getDetail"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="handleClose"
            >
             <div slot="dialogBody" class="the-body">
              
          <cvue-table
              :option="tableOption"
              :data="tableData"
              ref="tbl1"
              :isShowAdd="false"
              :page="page"
              :tablePage="tablePage"
              :pageSize="page.pageSize"
              :loading="tableLoading"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :isShowPage="true"
            >
                <template  v-for="item in tableOption.cloumn"
                    slot-scope="scope" :slot="item.prop">
                    <div :key="item.prop">
                          
                             <el-select v-if="scope.row[item.prop].list"  :class="{'error-in': !scope.row[item.prop].legal}"
                                v-model="scope.row[item.prop].val" 
                                 @change="handChange(scope.row, item.prop)"
                                placeholder="">
                                <el-option
                                v-for="item in scope.row[item.prop].list"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>

                            <el-input v-else :class="{'error-in': !scope.row[item.prop].legal}"
                            v-model.trim="scope.row[item.prop].val" 
                            @blur="handBlur(scope.row, item.prop)"
                            placeholder="" ></el-input>
                            <div v-if="!scope.row[item.prop].legal" class="error-text">
                                <div v-if="scope.row[item.prop].errVal == scope.row[item.prop].val">{{scope.row[item.prop].errDesc}}</div>
                                <div v-else>{{scope.row[item.prop].desc}}</div>
                            </div>
                    </div>
                   
                </template>
                <!-- 操作按钮 -->
                <el-table-column
                    fixed="right"
                    slot="actionMenu"
                    label="操作"
                    align="center"
                    header-align="center"
                    width="200"
                >

                    <template slot-scope="scope" >
                        <div class="operation">
                           
                            <el-button @click="handDel(scope.row)" type="text">删除</el-button>
                            
                        </div>
                  
                    </template>
                </el-table-column>
            </cvue-table>
             </div>
          
        </cvue-dialog>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
// import {check} from '@/util/xlsxMap'

export default {
    components: {
        cvueTable, cvueDialog
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        action: String,
        map: Object,
        xlsxMap: Object,
        data: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
     computed: {
        descMap () {
            var obj = {}
            for (var key in this.map) {
                obj[this.map[key].col] = this.map[key].desc
            }
            return obj
        },
      
        tableOption () {
            var opt = {
                stripe: false,
                width: '100%',
                border: false,
                index: false,
                cloumn: [
                    // { prop: 'provinceAreaName', label: '省', align: 'center' }
                ]
            }

            var list = [].concat(this.list)
           
            for (var key in list[0]) {
                if (list[0][key].ch) {
                    opt.cloumn.push({ prop: key, label: list[0][key].ch, align: 'center', slotStatus: true })
                }
            }
    
            return opt
        }

    },
    data () {
        return {
             tablePage: 1,
            tableLoading: false,
            page: {
                total: 10, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 6, // 每页显示多少条
                pageSizes: [6]
            },
            tableData: [],
            copyList: [],
            list: []
        }
    },
   
    methods: {
        getList () {
            var list = []
            if (this.action == 'look') {
                list = this.data
            }
            if (this.action == 'modify') {
                for (var item of this.data) {
                    var flag = true
                    for (var key in item) {
                        if (!item[key].legal && typeof item[key] == 'object') {
                            flag = false
                        }
                    }
                    if (!flag) {
                        list.push(item)
                    }
                }
            }
            this.list = JSON.parse(JSON.stringify(list))
        },
        getTableData (pageNum) {
            this.page.currentPage = pageNum
           
            var start = (pageNum - 1) * this.page.pageSize
            var end = start + this.page.pageSize
           
             this.page.total = this.list.length
            
            this.tableData = this.list.slice(start, end)

            if (this.tableData.length == 0 && this.page.currentPage > 1) {
                this.getTableData(this.page.currentPage - 1)
            }
        },
        // 触发事件
        handleClose () {
            this.closeDialog()
        },
        closeDialog () {
            this.$emit('close')
        },
        confirmDialog () { 
             this.$emit('confirm', this.list)
        
            this.closeDialog()
        },
       
        // 获取详情
        getDetail () {
            this.getList()
            this.getTableData(1)
        },
        // 改变pagesize
        handleSizeChange (val) {
            this.page.pageSize = val
            this.getTableData(1)
        },
        // 改变页码
        handleCurrentChange (val) {
            this.getTableData(val)
        },

        handDel (item) {
            console.log(item)
            var list = this.list
            for (var i = 0; i < list.length; i++) {
                if (list[i].id == item.id) {
                    list.splice(i, 1)
                }
            }

            this.$emit('delete', item.id)
        
            this.getTableData(this.page.currentPage)
        },
        handBlur (item, prop) {
            var val = item[prop].val
            var ch = item[prop].ch
            
             var list = item[prop].list
             this.map[ch].list = list
           
             var checkObj = Object.assign({}, this.map[ch])  
             checkObj.val = val
              var result = this.$parent.xlsxMap.check(checkObj)
                var flag = result.legal
                var legalDesc = result.desc
          
           list = this.list
            
            for (var i = list.length - 1; i >= 0; i--) {
                if (list[i].id == item.id) {
                    console.log(i, i, i)
                    item[prop].legal = flag
                    item[prop].desc = legalDesc
                    var copy = JSON.parse(JSON.stringify(item))
                    list.splice(i, 1, copy)
                    // this.$set(list[i], prop, flag)
                }
            }

            this.getTableData(this.page.currentPage)
        },
       handChange (item, prop) {
            if (prop == 'stageName') {
                this.stageChange(item, prop)
            } else if (prop == 'startYear') {
                this.startYearChange(item, prop)
            } else {
                 this.handBlur(item, prop)
            }
        },
        stageChange (item, prop) {
             var stageName = item.stageName.val
             var list = this.$parent.xlsxMap.getPeroidsByStageName(stageName)
             item.startYear.list = list
             
             list = this.$parent.xlsxMap.getGradeByName({stageName: item.stageName.val, peroidName: item.startYear.val})
             item.gradeName.list = list

             this.handBlur(item, prop)
             this.handBlur(item, 'startYear')
             this.handBlur(item, 'gradeName')
        },
        startYearChange (item, prop) {
             var list = this.$parent.xlsxMap.getGradeByName({stageName: item.stageName.val, peroidName: item.startYear.val})
             item.gradeName.list = list

             this.handBlur(item, prop)
             this.handBlur(item, 'gradeName')
        }
    },
    mounted () {
       
    }
}
</script>
<style scoped>
.the-body{
   
    padding: 10px;
}
.error-in{
    border: 1px solid red;
}
.error-text{
    color: red;
}
</style>
